<template>
  <el-dialog
    :visible="show"
    :title="title"
    :before-close="close"
    width="fit-content"
    center
    :close-on-click-modal="false"
  >
    <el-form
      :model="dataForm"
      :rules="rules"
      :inline="true"
      label-width="130px"
    >
      <el-form-item label="输入框" prop="inputValue">
        <el-input v-model="dataForm.inputValue"></el-input>
      </el-form-item>
      <el-form-item label="选择框" prop="selectId">
        <el-select v-model="dataForm.selectId" clearable filterable multiple>
          <el-option
            v-for="item in list"
            :value="item.id"
            :label="item.name"
            :key="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="文本" prop="text">
        <el-input type="textarea" v-model="dataForm.text"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button type="primary">提交</el-button>
      <el-button @click="close">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: ["show", "title"],
  data() {
    return {
      dataForm: {
        inputValue: "",
        selectId: "",
        text: ""
      },
      rules: {},
      list: [
        { id: 1, name: "第一个" },
        { id: 2, name: "第二个" },
        { id: 3, name: "第三个" },
        { id: 4, name: "第四个" },
        { id: 5, name: "第五个" },
        { id: 6, name: "第六个" }
      ]
    };
  },
  watch: {
    show() {}
  },
  methods: {
    submit() {},
    close() {
      this.$emit("update:show", false);
    }
  }
};
</script>

<style lang="scss" scoped>
.el-dialog__wrapper{
  ::v-deep {
    .el-dialog__body {
        max-height: 60vh;
        overflow: auto;
      .el-row {
        width: 100%;
      }
      .el-form {
        display: flex;
        justify-content: space-between;
        width: 1000px;
        flex-wrap: wrap;
        & > .el-form-item {
          width: 46%;
          display: flex;
          .el-form-item__content {
            // width: 330px;
            flex: 1;
            .el-input,
            .el-select {
              width: 100%;
            }
            .el-select__input {
              transform: translateY(1px);
              height: 30px;
            }
            input {
              overflow: hidden;
              line-height: 32px;
              height: 32px;
              background-color: #f7f7f7;
            }
            textarea {
              background-color: #f7f7f7;
            }
          }
        }
      }
      .form-one_row {
        width: 520px;
        & > .el-form-item {
          width: 100%;
        }
      }
    }
  }
}
</style>
